<!DOCTYPE HTML>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@include file="pages/taglib.jsp" %>
<html>
  <head>

    <base href="<%=basePath%>">
    <title>数据分析</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<%@include file="pages/link-script.jsp"%>
	<!-- 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> 
	 -->
  </head>
  <body>
  	<s:action name="selectDealResultAndProjectStatus" namespace="/"></s:action>
  	<s:action name="selectMonthAndCountList" namespace="/"></s:action>
  	<%@include file="pages/header.jsp" %>
  	<h4 class="sub-header">数据分析图</h4>
  	</div>
  	
  	<div class="row">
	  	<div  class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-2 main">	
			<h4>需求审批统计</h4>
			<canvas id="pieChart" height="200%">canvas</canvas>
			<s:iterator value="#session.dealResultBean" status="status" >
				<s:textfield  type="hidden"  id="pass"  name="pass"/>
				<s:textfield  type="hidden"  id="passing"  name="passing"/>
				<s:textfield  type="hidden"  id="zanhuan"  name="zanhuan"/>
				<s:textfield  type="hidden"  id="huijue"  name="huijue"/>
				<s:textfield  type="hidden"  id="huitui"  name="huitui"/>
				<s:textfield  type="hidden"  id="dealResultCount"  name="dealResultCount"/>
			</s:iterator>
			<script type="text/javascript">
			console.log("*********1**********");
			
			var pass = document.getElementById("pass").value;
			var passing = document.getElementById("passing").value;
			var zanhuan = document.getElementById("zanhuan").value;
			var huijue = document.getElementById("huijue").value;
			var huitui = document.getElementById("huitui").value;
			var dealResultCount = document.getElementById("dealResultCount").value;
			
	        console.log("pass:"+pass);
	        console.log("passing:"+passing);
	        console.log("zanhuan:"+zanhuan);
	        console.log("huijue:"+huijue);
	        console.log("huitui:"+huitui);
	        console.log("dealResultCount:"+dealResultCount);
	        
			//Get the context of the canvas element we want to select
			var ctx = document.getElementById("pieChart");
			var pieChart = new Chart(ctx, {
			    type: 'pie',
			    data: {
				    labels: [
				        "通过",
				        "审批中",
				        "暂缓",
				        "回绝",
				        "回退"
				    ],
				    datasets: [
				        {
				            data: [pass, passing, zanhuan,huijue,huitui],
				            backgroundColor: [
				                "#33CC99",
				                "#33CCCC",
				                "#99FFFF",				                
				               	"#FFCC00",
				                "#FF6384"
				            ],
				            hoverBackgroundColor: [
				                "#33CC99",
				                "#33CCCC",
				                "#99FFFF",				                
				               	"#FFCC00",
				                "#FF6384"
				            ]
				        }]
				},
			    options: {

			    }
			});
			</script>
		   </div>
		   
		   
		   <div  class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 main">
			<h4>开发项目统计</h4>
			<canvas id="doughnutChart" height="200%">canvas</canvas>
			<s:iterator value="#session.projectStatusBean" status="status" >
				<s:textfield  type="hidden"  id="touchan"  name="touchan"/>
				<s:textfield  type="hidden"  id="prepareTouchan"  name="prepareTouchan"/>
				<s:textfield  type="hidden"  id="test"  name="test"/>
				<s:textfield  type="hidden"  id="develop"  name="develop"/>
				<s:textfield  type="hidden"  id="paiqi"  name="paiqi"/>
				<s:textfield  type="hidden"  id="projectStatusCount"  name="projectStatusCount"/>
			</s:iterator>
			<script type="text/javascript">
				console.log("*********2**********");
				
				var touchan = document.getElementById("touchan").value;
				var prepareTouchan = document.getElementById("prepareTouchan").value;
				var test = document.getElementById("test").value;
				var develop = document.getElementById("develop").value;
				var paiqi = document.getElementById("paiqi").value;
				var projectStatusCount = document.getElementById("projectStatusCount").value;
				//Get the context of the canvas element we want to select
				var ctx = document.getElementById("doughnutChart");
				var doughnutChart = new Chart(ctx, {
				    type: 'doughnut',
				    data: {
					    labels: [
					        "已投产",
					        "待投产",
					        "测试",
					        "开发",
					        "排期"
					    ],
					    datasets: [
					        {
					            data: [touchan,prepareTouchan,test,develop,paiqi],
					            backgroundColor: [
					                "#33CC99",
					                "#33CCCC",
					                "#99FFFF", 					                
					                "#FFCC00",
					                "#FF6384"
					            ],
					            hoverBackgroundColor: [
					                "#33CC99",
					                "#33CCCC",	
					                "#99FFFF",			                
					                "#FFCC00",
					                "#FF6384"
					            ]
					        }]
					},
				    options: {

				    }
				});
			</script>
		   </div>
	   </div>
	  	<div class="row">
		  	<div  class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-2 main">
		  	<h4>实施中项目统计</h4>
				<canvas id="pieChart2" height="200%">canvas</canvas>
				<s:iterator value="#session.projectStatusBean" status="status" >
					<s:textfield  type="hidden"  id="touchan1"  name="touchan"/>
					<s:textfield  type="hidden"  id="prepareTouchan1"  name="prepareTouchan"/>
					<s:textfield  type="hidden"  id="test1"  name="test"/>
					<s:textfield  type="hidden"  id="develop1"  name="develop"/>
					<s:textfield  type="hidden"  id="paiqi1"  name="paiqi"/>
					<s:textfield  type="hidden"  id="projectStatusCount1"  name="projectStatusCount"/>
				</s:iterator>
				<script type="text/javascript">
				console.log("*********3**********");
				
				var touchan1 = document.getElementById("touchan1").value;
				var prepareTouchan1 = document.getElementById("prepareTouchan1").value;
				var test1 = document.getElementById("test1").value;
				var develop1 = document.getElementById("develop1").value;
				var paiqi1 = document.getElementById("paiqi1").value;
				var projectStatusCount1 = document.getElementById("projectStatusCount1").value;
				//Get the context of the canvas element we want to select
				var ctx = document.getElementById("pieChart2");
				var pieChart = new Chart(ctx, {
				    type: 'pie',
				    data: {
					    labels: [
					        "待投产",
					        "测试",
					        "开发",
					        "排期"
					    ],
					    datasets: [
					        {
					            data: [prepareTouchan1, test1, develop1,paiqi1],
					            backgroundColor: [
					                "#33CCCC",
					                "#99FFFF",				                
					               	"#FFCC00",
					                "#FF6384"
					            ],
					            hoverBackgroundColor: [
					                "#33CCCC",
					                "#99FFFF",				                
					               	"#FFCC00",
					                "#FF6384"
					            ]
					        }]
					},
				    options: {

				    }
				});
				</script>
			   </div>
			   <div  class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 main">
				<h4>每月新增需求和投产统计(即将上线)</h4>
				<canvas id="lineChart"  height="200%">canvas</canvas>
				
				<s:textfield type="hidden"  id="monthList"  name="#session.monthList"/>
				<s:textfield type="hidden" id="dealDateMonthCountList"  name="#session.dealDateMonthCountList"/>
				<s:textfield type="hidden" id="realTouchanDateMonthCountList"  name="#session.realTouchanDateMonthCountList"/>
				<script type="text/javascript">
				console.log("*********4**********");
				
				var monthList = document.getElementById("monthList").value;
				var dealDateMonthCountList = document.getElementById("dealDateMonthCountList").value;
				var realTouchanDateMonthCountList = document.getElementById("realTouchanDateMonthCountList").value;
				
				function splitList(list){
					var array = new Array();	
					array = list.split("[")[1];
					array = array.split("]")[0];
					array = array.split(", ");
					console.log("array length is:"+array.length);
					console.log("array is:");
					for(var i=0;i<array.length;i++){
						console.log(array[i]);
					}
					return array;
				}
				monthList = splitList(monthList);
				dealDateMonthCountList = splitList(dealDateMonthCountList);
				realTouchanDateMonthCountList = splitList(realTouchanDateMonthCountList);			
				//Get the context of the canvas element we want to select
				var ctx = document.getElementById("lineChart");
				var lineChart = new Chart(ctx, {
				    type: 'line',
				    data:{
						labels : ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
						datasets : [
							{
								label:"每月新增需求",
								fill: false,
					            lineTension: 0.1,
					            backgroundColor: "rgba(75,192,192,0.4)",
					            borderColor: "rgba(75,192,192,1)",
					            borderCapStyle: 'butt',
					            borderDash: [],
					            borderDashOffset: 0.0,
					            borderJoinStyle: 'miter',
					            pointBorderColor: "rgba(75,192,192,1)",
					            pointBackgroundColor: "#fff",
					            pointBorderWidth: 1,
					            pointHoverRadius: 5,
					            pointHoverBackgroundColor: "rgba(75,192,192,1)",
					            pointHoverBorderColor: "rgba(220,220,220,1)",
					            pointHoverBorderWidth: 2,
					            pointRadius: 1,
					            pointHitRadius: 10,
								data : [dealDateMonthCountList[0],dealDateMonthCountList[1],dealDateMonthCountList[1],dealDateMonthCountList[3],dealDateMonthCountList[4],
										dealDateMonthCountList[5],dealDateMonthCountList[6],dealDateMonthCountList[7],dealDateMonthCountList[8],dealDateMonthCountList[9],
										dealDateMonthCountList[10],dealDateMonthCountList[11]
								],
								spanGaps: false
							},
							{
								label:"每月新增投产",
								fill: false,
					            lineTension: 0.1,
					            backgroundColor: "rgba(250,128,114,0.4)",
					            borderColor: "rgba(250,128,114,1)",
					            borderCapStyle: 'butt',
					            borderDash: [],
					            borderDashOffset: 0.0,
					            borderJoinStyle: 'miter',
					            pointBorderColor: "rgba(250,128,114,1)",
					            pointBackgroundColor: "#fff",
					            pointBorderWidth: 1,
					            pointHoverRadius: 5,
					            pointHoverBackgroundColor: "rgba(250,128,114,1)",
					            pointHoverBorderColor: "rgba(220,220,220,1)",
					            pointHoverBorderWidth: 2,
					            pointRadius: 1,
					            pointHitRadius: 10,
								data : [realTouchanDateMonthCountList[0],realTouchanDateMonthCountList[1],realTouchanDateMonthCountList[2],realTouchanDateMonthCountList[3],
									realTouchanDateMonthCountList[4],realTouchanDateMonthCountList[5],realTouchanDateMonthCountList[6],realTouchanDateMonthCountList[7],
									realTouchanDateMonthCountList[8],realTouchanDateMonthCountList[9],realTouchanDateMonthCountList[10],realTouchanDateMonthCountList[11]
								],
								spanGaps: false
							}
						]
					},
				    options: {
				    	
				    }
				});
				</script>
			   </div>
		   </div>
	   <%@include file="pages/footer.jsp" %>
 	</body>
</html>
